.login {
  height: 100vh;
  background-color: rgba(236, 164, 138, 0.7);
  .login-top {
    position: relative;
    height: 300px;
    background-color: rgba(0, 128, 128, 0.8);
    border-radius: 0 0 100% 100%;

    .welcome {
      text-align: center;
      padding-top: 100px;
      width: 460px;
      margin: 0 auto;
      font-size: 40px;
      font-weight: bold;
      color: white;
    }

    // 三角形
    .triangle::before {
      content: " ";
      position: absolute;
      top: 30px;
      right: 200px;
      width: 0;
      height: 0;
      border-left: 30px solid transparent;
      border-top: 30px solid rgba(255, 255, 255, 0.5);
      border-right: 30px solid transparent;
      transform: rotate(65deg);
    }
    .triangle::after {
      content: " ";
      position: absolute;
      top: 30px;
      right: 200px;
      width: 0;
      height: 0;
      border-left: 29px solid transparent;
      border-top: 29px solid rgba(0, 128, 128, 0.8);
      border-right: 29px solid transparent;
      transform: rotate(65deg);
    }

    // 长方形
    .rectangle {
      position: absolute;
      left: 24vw;
      top: 50px;
      height: 50px;
      width: 100px;
      border: 1px solid rgba(255, 255, 255, 0.5);
      transform: rotate(-15deg);
    }

    // 圆形
    .circular::before {
      content: " ";
      position: absolute;
      top: 0;
      right: 0;
      width: 100px;
      height: 100px;
      background-color: rgba(255, 255, 255, 0.5);
      border-radius: 50%;
    }
    .circular::after {
      content: " ";
      position: absolute;
      top: 0;
      right: 0;
      width: 99px;
      height: 99px;
      background-color: rgba(0, 128, 128, 0.8);
      border-radius: 50%;
    }
  }
  .login-form {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-width: 600px;
    min-width: 320px;
    height: 380px;
    background-color: rgba(128, 61, 177, 0.7);
    // background-color: rgba(201, 79, 42, 0.9);
    border-radius: 10px;
    padding: 40px 40px;
    .login-form-forgot {
      color: white;
      float: right;
    }
    .toRegister {
      color: white;
      display: block;
      margin-top: 10px;
      width: 100px;
    }
  }
}
